<script>
import { ref, reactive, onBeforeMount } from "vue";
// import { Toast } from "vant";
import { useRouter } from "vue-router";
// 引入接口
import {
  getCategoryJsonData,
  getCategoryData,
} from "../assets/api/category.js";
export default {
  setup() {
    let active = ref(0);
    let onChange = (index) => {
      active.value = index;
      // Toast(`标签名 ${index}`)
      // console.log(active);
      // console.log(listObj.i);
    };

    let router = useRouter();
    // 返回
    let black = () => {
      console.log(1);
      // router.push("/BookCity")
      router.go(-1);
    };

    // 定义请求接口数据结构
    let listObj = reactive({
      allList: [],
      tagList: [],
      content: [],
      lastContent: [],
      male: [], //男频
      famale: [], //女频
      publish: [], //出版
      i: 0,
      text: "", //输入框值
      inpItem: [],
    });

    // 数据初始化
    let dateInit = async () => {
      let data = await getCategoryData().catch(() =>
        console.log("接口调用失败")
      );
      if (!data) data = await getCategoryJsonData();
      // console.log(data);
      listObj.allList = JSON.parse(JSON.stringify(data.allList));
      console.log(listObj.allList);
      listObj.allList.forEach((item) => {
        item.tagList.forEach((tag) => {
          if (
            !listObj.tagList.some((o) => o == tag) &&
            tag != "" &&
            tag.length == 4
          )
            listObj.tagList.push(tag);
        });
      });
      // console.log(listObj.tagList);
      // console.log(listObj.tagList);
      cat(0);
    };

    let cat = (index) => {
      listObj.i = index;
      //  console.log(active);
      // console.log(listObj.tagList[index]);
      listObj.lastContent = listObj.allList.filter((item) => {
        return item.tagList.some((data) => data == listObj.tagList[index]);
      });
      listObj.content = listObj.lastContent;
      listObj.male = listObj.content.filter((item) => item.type == 1);
      listObj.famale = listObj.content.filter((item) => item.type == 2);
      listObj.publish = listObj.content.filter((item) => item.type == 3);
    };

    // 挂载前
    onBeforeMount(() => {
      // 数据初始化
      dateInit();
    });

    // 输入框
    let inpChange = (e) => {
      console.log(e.target.value);
      let arr = (listObj.lastContent = listObj.allList.filter((item) => {
        return item.BookName.includes(e.target.value);
      }));
      listObj.text = e.target.value;
      console.log(arr);
      listObj.inpItem = arr;
      //  cat(4)
      //  onChange(4)
    };

    // 详情页跳转
    let details = (id) => {
      router.push({ path: "/Details", query: { id: id } });
    };

    return {
      active,
      onChange, //左侧修改
      black, //上一页
      listObj, //接口数据
      cat, //点击左侧
      inpChange, //输入框
      details, //详情页
    };
  },
};
</script>

<template>
  <div class="Category">
    <van-sticky>
      <div class="top">
        <span class="iconfont icon-xiangzuo1" @click="black"></span>
        <div class="top_inp">
          <span class="iconfont icon-sousuo"></span>
          <input
            type="text"
            placeholder="快来搜索想看的书吧"
            @input="inpChange"
          />
        </div>
        <p>搜索</p>
      </div>
    </van-sticky>
    <div class="item_box">
      <div class="left">
        <van-sidebar v-model="active" @change="onChange">
          <van-sidebar-item
            :style="{
              'border-top-right-radius': index == active + 1 ? '10px' : '',
              'border-bottom-right-radius': index == active - 1 ? '10px' : '',
            }"
            @click="cat(index)"
            v-for="(item, index) in listObj.tagList"
            :key="index"
            :title="item"
          />
        </van-sidebar>
      </div>
      <div class="right">
        <div class="right_item">
          <div class="img">
            <img src="../assets/img/cet01.png" alt="" />
          </div>

          <van-tabs v-show="!listObj.text">
            <van-tab title="男频">
              <div class="right_box" v-if="listObj.male">
                <div
                  class="item"
                  v-for="item in listObj.male"
                  :key="item.BookId"
                  @click="details(item.BookId)"
                >
                  <div class="img">
                    <img :src="item.BookImage" alt="" />
                  </div>
                  <div class="title">
                    <p>{{ item.BookName }}</p>
                    <p>{{ item.Author }}</p>
                  </div>
                </div>
              </div>
              <van-empty
                description="暂无相关数据"
                v-if="!listObj.male || listObj.male.length == 0"
              />
            </van-tab>
            <van-tab title="女频" v-if="listObj.famale">
              <div class="right_box">
                <div
                  class="item"
                  v-for="item in listObj.famale"
                  :key="item.BookId"
                  @click="details(item.BookId)"
                >
                  <div class="img">
                    <img :src="item.BookImage" alt="" />
                  </div>
                  <div class="title">
                    <p>{{ item.BookName }}</p>
                    <p>{{ item.Author }}</p>
                  </div>
                </div>
              </div>
              <van-empty
                description="暂无相关数据"
                v-if="!listObj.famale || listObj.famale.length == 0"
              />
            </van-tab>
            <van-tab title="出版">
              <div class="right_box" v-if="listObj.publish">
                <div
                  class="item"
                  v-for="item in listObj.publish"
                  :key="item.BookId"
                  @click="details(item.BookId)"
                >
                  <div class="img">
                    <img :src="item.BookImage" alt="" />
                  </div>
                  <div class="title">
                    <p>{{ item.BookName }}</p>
                    <p>{{ item.Author }}</p>
                  </div>
                </div>
              </div>
              <van-empty
                description="暂无相关数据"
                v-if="!listObj.publish || listObj.publish.length == 0"
              />
            </van-tab>
          </van-tabs>

          <div class="right_box" v-show="listObj.text">
            <h1>搜索结果</h1>
            <div
              class="item"
              v-for="item in listObj.inpItem"
              :key="item.BookId"
              @click="details(item.BookId)"
            >
              <div class="img">
                <img :src="item.BookImage" alt="" />
              </div>
              <div class="title">
                <p>{{ item.BookName }}</p>
                <p>{{ item.Author }}</p>
              </div>
            </div>
            <van-empty
              description="暂无相关数据"
              v-show="
                (listObj.text && !listObj.inpItem) ||
                listObj.inpItem.length == 0
              "
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.Category {
  min-height: 100%;
  min-width: 375px;
  max-width: 750px;
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 15px;
  .top {
    padding: 0 13px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    .top_inp {
      height: 32px;
      background-color: #f5f5f5;
      border-radius: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      .icon-sousuo {
        font-size: 15px;
        margin-left: 45px;
      }
      input {
        border: none;
        margin-left: 4px;
        &::-webkit-input-placeholder {
          font-size: 14px;
        }
      }
    }
    .icon-xiangzuo1 {
      font-size: 20px;
      color: #6c6a69;
    }
    p {
      font-size: 14px;
      color: #6c6a69;
    }
  }
  .left {
    width: 80px;
    background-color: #f5f5f5;
    position: fixed;
    top: 50px;
    left: 0;
    bottom: 0;
    overflow-y: scroll;
    &::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
  }
  .right {
    width: 295px;
    position: absolute;
    top: 50px;
    left: 80px;
    bottom: 0;
    padding: 0 14px;
    box-sizing: border-box;
    margin-top: 20px;
    .right_item {
      .img {
        height: 89px;
        border-radius: 8px;
        overflow: hidden;
      }
      .right_box {
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 20px;
        h1 {
          margin-top: 14px;
          font-size: 14px;
          color: #716d6d;
          height: 30px;
          line-height: 30px;
          padding: 0 6px;
          background: #f5f5f5;
          border-radius: 6px;
        }
        .item {
          margin-top: 14px;
          width: 100%;
          display: flex;
          .img {
            flex-shrink: 0;
          }
          .title {
            margin-left: 7px;
            font-size: 12px;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            color: #747271;
          }
        }
      }
    }
  }
}
::v-deep .van-sidebar-item {
  background-color: #f5f5f5;
}
::v-deep .van-sidebar-item--select {
  background-color: transparent;
}
::v-deep .van-sidebar {
  // min-height: 616px;
  background-color: #fff;
}
::v-deep .van-sidebar-item--select:before {
  border-radius: 10px;
  background-color: #ee0a24;
}
::v-deep .van-tab--active {
  font-size: 16px;
  font-weight: bold;
  color: #ee0a24;
}
::v-deep .van-tabs__line {
  width: 20px;
}
</style>